import React,{useState,useMemo, useEffect, useRef} from "react";
import * as echarts from 'echarts/core';
import { GridComponent, TitleComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import style from './index.module.less'

echarts.use([GridComponent, BarChart, CanvasRenderer,TitleComponent]);

const Age =()=>{

    const [dataone,setDataone] = useState(10)
    const [datatwo,setDatatwo] = useState(10)
    const [datathree,setDatathree] = useState(10)
    const [datafour,setDatafour] = useState(20)

    let myRef = useRef(null)

    let option = useMemo(()=>{
        let option = {
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [dataone,datatwo,datathree,datafour],
                type: 'bar'
              }
            ]
          };
          return option
    },[dataone,datatwo,datathree,datafour])

    useEffect(()=>{
        let chartDom = document.getElementById('agemain');
        let myChart = echarts.init(chartDom,'dark');
        myRef.current = myChart;
    },[])

    useEffect(()=>{
      let myChart = myRef.current;
      myChart.setOption(option);
    },[dataone,datatwo,datathree,datafour])

    return(
        <div>
            <div id="agemain" className={style.agecontainer}></div>
        </div>
    )
}

export default Age